import * as API from '@/services';
import {
  KfBackendEnumPicker,
  DEFAULT_FORM_LAYOUT,
  KfBizQuickFormProps,
  KfFloatingContextProps,
  KfInput,
  KfQuickForm,
  KfTextArea,
  KfUpload
} from 'kf-web-library';
import { Form, Space } from 'antd';
import React, { FunctionComponent } from 'react';

const FormItem = Form.Item;
type QueryEntity = API.JournalPeriod;
type CreateEntity = API.JournalPeriod_Create;
type ModifyEntity = API.JournalPeriod_Modify;

type DataFormProps = {} & KfBizQuickFormProps & KfFloatingContextProps;

/**
 * 刊期 表单
 */
const QuickForm: FunctionComponent<DataFormProps> = (props) => {
  const { formType, bizId, ...rest } = props;

  return (
    <KfQuickForm
      formType={formType}
      formProps={{
        labelCol: {
          flex: '0 0 100px',
        },
        wrapperCol: {
          flex: '1',
        },
      }}
      defaultQueryRequest={() =>
        API.queryJournalPeriod(bizId!).then((resp) => {
          if (resp.flag) {
            resp.data = {
              ...resp.data,
              journalNameCn: resp.data?.journal?.journalNameCn,
              journalCoverPath: resp.data?.journalCoverPath || resp.data?.journal?.journalCoverPathUrl,
            } as any;
          }
          return new Promise((resolve) => resolve(resp));
        })
      }
      submitRequest={{
        create: (formValues) => API.createJournalPeriod({ ...formValues } as CreateEntity),
        modify: (formValues) => API.patchJournalPeriod({
          journalCoverPath: formValues.journalCoverPath,
          id: bizId } as ModifyEntity),
      }}
      {...rest}
    >
      <FormItem name={nameof.split<ModifyEntity>((x) => x.journalNameCn)} label="所属期刊" rules={[{ required: false }]}>
        <KfInput readonly={true} />
      </FormItem>
      <Space>
        <FormItem name={nameof<ModifyEntity>((x) => x.year)} label="年" rules={[{ required: false }]}>
          <KfInput readonly={true} />
        </FormItem>
        <FormItem name={nameof<ModifyEntity>((x) => x.volume)} label="卷" rules={[{ required: false }]}>
          <KfInput readonly={true} />
        </FormItem>
        <FormItem name={nameof<ModifyEntity>((x) => x.period)} label="期" rules={[{ required: false }]}>
          <KfInput readonly={true} />
        </FormItem>
      </Space>
      <FormItem name={nameof.split<ModifyEntity>((x) => x.journalCoverPath)} label="刊期封面" rules={[{ required: false }]}>
        <KfUpload.Avatar/>
      </FormItem>
    </KfQuickForm>
  );
};

export default QuickForm;
